<template>
	<view>
		<view class="action-items">
				<scroll-view scroll-y="true" style="height: calc(100vh - 400rpx);"  @scrolltolower="loadMore" >
					<view class="action-item-i" v-for="(item,i) in list" :key='i'>
						<view class="left">
							{{i+1}}
						</view>
						<view class="right">
							{{item.opItem}}
						</view>
						<view class='right-img'>
							<img src='../../../../static/icon/3.png' alt="1" v-if="item.isComplete" />
							<img src='../../../../static/icon/2.png' alt="2" v-if="!item.isComplete" />
						</view>
					</view>
				</scroll-view>
				<view class='server-view' v-show="isStart">
					<view class='left' @click="takePhoto">
						<view class='img-c'>
							<img src='../../../../static/icon/19.png' alt="1" />
						</view>
						<view>点击拍照或录像</view>
					</view>
					<view class='right' @click="takeRadio">
						<view class='img-c'>
							<img src='../../../../static/icon/20.png' alt="1" />
						</view>
						<view>点击开始录音，再点击停止</view>
					</view>
				</view>
				
				<view class="botton-btn-st" v-show="!isStart">
					<button type="primary" @click="goStart" >开始执行</button>
				</view>
				<view class="botton-btn-st-s botton-btn-st" v-show="isStart">
					<view class="left">
						<button type="primary"  >下一步</button>
					</view>
					<view class="right">
						<button type="primary"  >终止执行</button>
					</view>
				</view>
		</view>
	</view>
</template>

<script>
	import {
		getOperateItemPage
	} from '@/api/operationPicket.js'
	const recorderManager = uni.getRecorderManager();
	export default {
		data() {
			return {
			   current:1,
			   size:10,
			   isStart: false,
			   list:[],
			   path:'',
			   clickTimes: 0,
			   textRadio: '点击开始录音，再点击停止',
			}
		},
		props:{
			otId:{
			   type:String
			}
		},
		components: {},
		mounted(){
			this.getOperateItemPage()
		},
		methods: {
			// 拍照
			takePhoto() {
			    const ctx = plus.camera.getCamera();
				const res = ctx.supportedImageResolutions[0];
				const fmt = ctx.supportedImageFormats[0];
				console.log("Resolution: "+res+", Format: "+fmt);
				ctx.captureImage( function( path ){
					   this.path = path
						console.log( "Capture image success: " + path );  
					},
					function( error ) {
						console.log( "Capture image failed: " + error.message );
					},
					{resolution:res,format:fmt}
				);
			},
			// 录音
			takeRadio() {
				const _that = this
				_that.clickTimes++
				console.log(_that.clickTimes % 2 + '==================================')
				if (_that.clickTimes % 2 === 1) {
					_that.textRadio='录音开始'
					recorderManager.start({
						format: "mp3"
					});
					return
				}
				_that.textRadio='录音结束 '
				recorderManager.stop();
			},
			goStart(){
				this.isStart= true
			},
			// 获取操作项
			getOperateItemPage(){
				getOperateItemPage({
					otId: this.otId,
					current: this.current,
					size:this.size	
				}).then(res => {
					this.current++
					this.list = this.list.concat(res.result.records)
					this.pages = res.result.pages
				})
			},
			// 加载更多
			loadMore(){
				const {current,pages} = this
				if(current<=pages) {			
					this.getOperateItemPage()
				}
			}
		}
	}
</script>

<style lang="scss">
	.action-items {
		background-color: #fff;
		.action-item-i{
			color: #666;
			font-size: 25upx;
			display: flex;
			&>view{
				padding: 25upx 0;
				border-bottom: 1px solid #eee;
			}
			.left{
				flex: 1;
				text-align: center;
				border-right: 1px solid #eee;
			}
			.right{
				flex: 6;
				box-sizing: border-box;
				padding-left: 20upx;
			}
			.right-img{
				flex: 1;
				img{
					width: 60%;
				}
			}
		}
		.server-view{
			display: flex;
			width: 100%;
			color: #666;
			text-align: center;
			position: fixed;
			bottom: 20%;
			left: 0%;
			font-size: 12upx;
			.left{
				flex:1;
				 img{
				 	width: 45%;
				 }
			}
			.right{
				flex:1.5;
				img{
					width: 30%;
				}
			}
			.img-c{
			}
		}
		.botton-btn-st-s{
			
			.left{
				width: 48%;
				
			}
			.right{
				width: 48%;
			}
			display: flex;
			justify-content: space-between;
		}
		.botton-btn-st{
			position: fixed;
			bottom: 20upx;
			width: 96%;
			left: 2%;		
		}

	}
</style>
